<script>
import {dictionaryRequest} from "../../../../util/js/globalRequestJs";
import {addManagerUser} from "./js/AddManagerUserJs";

export default {
  name: 'AddManagerUser',
  data() {
    return {
      managerUser: {
        name: '',
        sex: '',
        age: '',
        phone: '',
        identity: '',
        position: ''
      },
      positions: []
    }
  },
  mounted() {
    // 获取职位列表
    dictionaryRequest('manager_user', 'position').then(res => {
      this.positions = res.data;
    }).catch(error => {
      console.log(error);
    })
  },
  methods: {
    // 关闭弹窗
    closeAdd() {
      this.$emit('closeAdd');
    },

    // 提交新增数据
    addSubmit() {
      const _this = this;
      _this.$confirm("是否确定添加用户?", "提示", {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        addManagerUser(_this.managerUser).then(res => {
          if (res.code === '200') {
            _this.$message.success("添加账户成功");
            _this.closeAdd();
          } else {
            _this.$message.error(res.msg);
          }
        }).catch(error => {
          console.log("系统出错了!", error);
        })
      }).catch(() => {
        _this.$message.info("已取消操作！")
      })
    }
  }
}
</script>

<template>
  <div style="height: 700px;height: 500px;padding: 10px;">
    <h1 style="text-align: center;">添加账户</h1>
    <div>
      <el-descriptions class="margin-top" size="small" direction="vertical" :column="2" border
                       style="text-align: center">
        <el-descriptions-item label="姓名">
          <el-input v-model="managerUser.name" style="width: 120px;"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-radio v-model="managerUser.sex" label="1" value="1">男</el-radio>
          <el-radio v-model="managerUser.sex" label="2" value="2">女</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          <el-input v-model="managerUser.age" style="width: 120px;"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          <el-input v-model="managerUser.phone" style="width: 150px;"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          <el-input v-model="managerUser.identity" style="width: 175px"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="职位" :span="2">
          <el-select v-model="managerUser.position" placeholder="请选择" style="width: 400px">
            <el-option v-for="item in positions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div id="al-add-bottom-submit">
      <el-button @click="closeAdd" type="primary" plain>取消</el-button>
      <el-button @click="addSubmit" type="primary" plain>提交</el-button>
    </div>
  </div>
</template>

<style scoped>
#al-add-bottom-submit {
  position: relative;
  width: 160px;
  top: 60px;
  left: 50%;
  transform: translate(-50%);
}
</style>
